<template>
	<view class="wrapper">
		<view class="status_bar"></view>
		<!-- 个人资料 -->
		<view class="center" @click="gotoUrl()">
			<view class="center_img">
				<image src='@/static/logo.png'></image>
			</view>
			<view class="center_info">
				<view class="center_name">
					<view>{{user_info.userName}}</view>
				</view>
				<view class="center_tel">
					<text>手机号：{{user_info.userTel}}</text>
				</view>
			</view>
			<u-icon name="arrow-right"></u-icon>
		</view>
		<!-- 单元格 -->
		<view class="mine-cell">
			<u-cell-group>
				<u-cell title="我的余额" :value="`${user_info.amount.toString()}	元`">
					<image slot="icon" src="@/static/yue.png" class="mine-cell-icon"></image>
				</u-cell>
				<view class="mine-cell-child"></view>
				<u-cell title="我的订单" isLink url="/pages/center/order">
					<image slot="icon" src="@/static/dingdan.png" class="mine-cell-icon"></image>
				</u-cell>
				<view class="mine-cell-child"></view>
				<u-cell title="个人信息" isLink url="/pages/center/persona">
					<image slot="icon" src="@/static/geren.png" class="mine-cell-icon"></image>
				</u-cell>
				<view class="mine-cell-child"></view>
				<u-cell title="修改密码" isLink url="/pages/center/password">
					<image slot="icon" src="@/static/mima.png" class="mine-cell-icon"></image>
				</u-cell>
				<view class="mine-cell-child"></view>
				<u-cell title="服务协议" isLink url="/pages/entry/serviceAgreement">
					<image slot="icon" src="@/static/fuwu.png" class="mine-cell-icon"></image>
				</u-cell>
				<view class="mine-cell-child"></view>
				<u-cell title="隐私协议" isLink url="/pages/entry/privacy">
					<image slot="icon" src="@/static/yinsi.png" class="mine-cell-icon"></image>
				</u-cell>
				<view class="mine-cell-child"></view>
				<u-cell title="退出登录" isLink @click="goOutShow = true">
					<image slot="icon" src="@/static/tuichu.png" class="mine-cell-icon"></image>
				</u-cell>
			</u-cell-group>
		</view>
		<view style="height: 140rpx;background-color: #F8F8F8;"></view>
		<!-- 退出 -->
		<u-modal v-if="goOutShow" :show="true" title="退出登录" content='请确认您是否要退出登录？' :showCancelButton="true" confirmColor="#5FC48D"
			@cancel="goOutShow = false" @confirm="goOut"></u-modal>
	</view>
</template>

<script>
	import {
		getUserInfo
	} from '@/api/login.js'
	export default {
		data() {
			return {
				goOutShow: false,
				user_info: {
					amount: 0,
					userName: '',
					userTel: ''
				}
			}
		},
		onShow() {
			this.user_info = this.$store.state.vuex_info
			this.getUserInfoHttp()
		},
		methods: {
			// 用户信息
			getUserInfoHttp() {
				let _this = this;
				getUserInfo({
					userId: _this.user_info.userId
				}).then(res => {
					if (res.success) {
						_this.$u.vuex('vuex_info', res.data);
						_this.user_info = res.data
					} else {
						_this.user_info = {}
					}
				})
			},
			gotoUrl() {
				uni.navigateTo({
					url: `/pages/center/persona`
				})
			},
			goOut() {
				this.$u.vuex('vuex_info', null);
				uni.reLaunch({
					url: '/pages/login/login'
				})
			}
		}
	};
</script>

<style scoped lang="scss">
	Page {
		font-size: 28rpx;
	}

	::v-deep.u-line {
		border-bottom: 0 !important;
	}

	.center {
		height: 300rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 0 40rpx;
		margin-bottom: 20rpx;
		background-color: #fff;
	}

	.center_img {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		border: 1px solid #dedede;
		overflow: hidden;
	}

	.center_img image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.center_name {
		font-size: 40rpx;
	}

	.center_info {
		flex: 1;
		margin-left: 40rpx;

		.center_tel {
			margin-top: 20rpx;
			color: #999;
			font-size: 28rpx;
		}
	}

	.wrapper {
		position: absolute;
		top: 0;
		bottom: 0;
		width: 100%;
		background-color: #F8F8F8;
		// background-image: linear-gradient(45deg, #1D91D7, #32B1BD);
	}

	.mine-cell {
		background-color: #fff;

		.mine-cell-icon {
			width: 44rpx;
			height: 44rpx;
			margin-right: 10rpx;
		}

		.mine-cell-child {
			height: 10rpx;
			background-color: #F8F8F8;
			// background-image: linear-gradient(45deg, #1D91D7, #32B1BD);
		}
	}
</style>